<template>
    <div style="height: 80vh;overflow-y: auto;position: relative;width: 100%;">
        <el-row :gutter="24">
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="200px" status-icon>
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>基础设置</span>
                        </div>
                    </template>
                    <el-form-item label="关联商家" prop="storeId">
                        <el-select v-model="ruleForm.storeId" placeholder="请选择" @change="changeSelect"
                            :disabled="!props.isAdd">
                            <el-option v-for="(item, index) in businessListings" :key="index" :label="item.storeName"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="关联门店" v-if="ruleForm.storeId" prop="shopId">
                        <div>
                            <el-select v-model="ruleForm.shopId" placeholder="请选择" multiple collapse-tags
                                :disabled="!props.isAdd">
                                <el-option v-for="(item, index) in storeData" :key="index" :label="item.name"
                                    :value="item.id" />
                            </el-select>
                            <p style="margin: 0;">关联商家商品保存后无法修改，请谨慎选择</p>
                        </div>
                    </el-form-item>
                    <el-form-item label="商品名称" prop="name">
                        <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="商品分类" prop="type">
                        <el-cascader v-model="ruleForm.type" :options="classificationListData" :props="propsData"
                            clearable @change="changeType" :show-all-levels="false" :disabled="!props.isAdd"/>
                    </el-form-item>
                    <el-form-item label="关联景区" v-if="changeTypeData[0] == '景区商品'" prop="scenicAreaId">
                        <el-select v-model="ruleForm.scenicAreaId" placeholder="请选择" :disabled="!props.isAdd">
                            <el-option v-for="(item, index) in scenicAreaData" :key="index" :label="item.name"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="行程路线" v-if="ruleForm.type == '线路商品'" prop="path">
                        <el-button class="mt-4" style="margin-bottom: 10px;" @click="onAddItem1">添加线路</el-button>
                        <el-table :data="ruleForm.path" style="width: 100%" max-height="400" class="eltableDiv">
                            <el-table-column prop="name" label="路线名称" width="145">
                                <template #default="scope">
                                    <el-input v-model="scope.row.name" placeholder="请输入" />
                                </template>
                            </el-table-column>
                            <el-table-column prop="day" label="天数" width="200">
                                <template #default="scope">
                                    <el-input v-model.number="scope.row.day" placeholder="请输入" type="number"
                                        oninput="if(value<1)value=1">
                                        <template #prepend>第</template>
                                        <template #append>天</template>
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="time" label="时间" width="200">
                                <template #default="scope">
                                    <el-time-select v-model="scope.row.time" start="06:00" step="00:30" end="22:00"
                                        placeholder="请选择" />
                                </template>
                            </el-table-column>
                            <el-table-column prop="description" label="内容" width="240">
                                <template #default="scope">
                                    <el-input v-model="scope.row.description" placeholder="请输入" type="textarea">
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column fixed="right" label="操作">
                                <template #default="scope">
                                    <el-button link type="danger" size="small"
                                        @click.prevent="deleteRow1(scope.$index)">
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                    <el-form-item label="商品轮播图" prop="photo">
                        <div>
                            <Uploads :row="ruleForm.photo" @OK="OKdata2" @removeImg="removeImg2"></Uploads>
                            <div>
                                建议尺寸：750*750像素，第一张为商品主图，其他为商品轮播图，商品海报选取轮播图第一张
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="是否开启物流">
                        <el-radio-group v-model="ruleFormData.islogistics" class="ml-4">
                            <el-radio label="是" size="large" value="是"></el-radio>
                            <el-radio label="否" size="large" value="否"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="物流选择" v-if="ruleFormData.islogistics == '是'" prop="logisticsCompany">
                        <el-select v-model="ruleForm.logisticsCompany" class="m-2" placeholder="请选择" size="large">
                            <el-option v-for="item in logisticsList" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="售后服务" v-if="ruleFormData.islogistics == '否'" prop="afterSalesService">
                        <el-radio-group v-model="ruleForm.afterSalesService">
                            <el-radio label="未核销无论是否过期都支持退款" value="0">
                            </el-radio>
                            <el-radio label="未核销退款" value="1" />
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="单独设置退款手续费率" prop="refundHandlingRate">
                        <el-input v-model.number="ruleForm.refundHandlingRate" placeholder="请输入" type="number"
                            oninput="if(value<0)value=0">
                            <template #append>%</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="搭配商品">
                        <div>
                            <el-button type="primary" @click="matchingProducts = true">选择商品</el-button>
                            <div v-if="ruleFormData.matchingProducts.length > 0">
                                <el-table :data="ruleFormData.matchingProducts" style="width: 100%">
                                    <el-table-column prop="name" label="商品" width="180" />
                                    <el-table-column prop="merchandiseInventory" label="库存" width="180" />
                                    <el-table-column label="操作" width="120">
                                        <template #default="{ row }">
                                            <el-button link type="danger" size="small" @click="deleteList(row)">
                                                删除
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="上架时间">
                        <el-radio-group v-model="ruleFormData.ListingTime">
                            <el-radio label="立即上架" value="0" />
                            <el-radio label="自定义上架时间" value="1" />
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="选择时间" v-if="ruleFormData.ListingTime == '1'" prop="dateIssuedTime">
                        <el-date-picker v-model="ruleForm.dateIssuedTime" type="datetime" placeholder="请选择"
                            format="YYYY/MM/DD hh:mm:ss" value-format="YYYY-MM-DD hh:mm:ss" />
                    </el-form-item>
                    <el-form-item label="下架时间">
                        <el-radio-group v-model="ruleFormData.removalTime">
                            <el-radio label="不下架" value="0" />
                            <el-radio label="自定义下架时间" value="1" />
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="选择时间" v-if="ruleFormData.removalTime == '1'" prop="removalTime">
                        <el-date-picker v-model="ruleForm.removalTime" type="datetime" placeholder="请选择"
                            format="YYYY/MM/DD hh:mm:ss" value-format="YYYY-MM-DD hh:mm:ss" />
                    </el-form-item>
                </el-card>
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>价格库存</span>
                        </div>
                    </template>
                    <el-form-item label="售卖价" prop="sellingPrice">
                        <el-input v-model.number="ruleForm.sellingPrice" placeholder="请输入" type="number"
                            oninput="if(value<0)value=0">
                            <template #append>元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="积分" v-if="ruleForm.type == '积分商品'" prop="integral">
                        <div>
                            <el-input v-model.number="ruleForm.integral" placeholder="请输入" type="number"
                                oninput="if(value<0)value=0">
                                <template #append>分</template>
                            </el-input>
                            <div>注释：该商品可以使用售卖价+积分的形式购买</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="市场价" v-if="ruleForm.type != '积分商品'" prop="marketPrice">
                        <el-input v-model.number="ruleForm.marketPrice" placeholder="请输入" type="number"
                            oninput="if(value<0)value=0">
                            <template #append>元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="商品库存" prop="merchandiseInventory">
                        <el-input v-model.number="ruleForm.merchandiseInventory" placeholder="请输入" type="number"
                            oninput="value=value.replace(/^0|[^0-9]/g, 1)">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="库存预警" prop="inventoryWarning">
                        <el-input v-model.number="ruleForm.inventoryWarning" placeholder="请输入" type="number"
                            oninput="value=value.replace(/^0|[^0-9]/g, 0)">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="已售出数" prop="numberSold">
                        <div>
                            <el-input v-model.number="ruleForm.numberSold" placeholder="请输入"
                                oninput="value=value.replace(/^0|[^0-9]/g, 0)" type="number">
                                <template #append>件</template>
                            </el-input>
                            <p style="margin: 0;">前端显示已出售数等于真实销售数+此处设置的数量</p>
                        </div>
                    </el-form-item>
                    <el-form-item label="订单预约使用">
                        <el-switch v-model="ruleForm.reservation"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value="0"
                            :inactive-value="1" />
                        <p style="margin: 0;color: red;margin-left: 10px;">下单后需预约才可使用，操作不可逆请慎重选择。</p>
                    </el-form-item>
                </el-card>
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>商品描述</span>
                        </div>
                    </template>
                    <el-form-item label="商品使用说明" prop="productUsageInstructionsId">
                        <div class="goodsServicesDiv">
                            <el-select v-model="ruleForm.productUsageInstructionsId">
                                <el-option :label="item.name" :value="item.id"
                                    v-for="(item, index) in goodsServicesList" :key="index" />
                            </el-select>
                        </div>
                    </el-form-item>
                    <el-form-item label="商品规格" prop="commercialSpecificationId">
                        <div class="goodsServicesDiv">
                            <el-select v-model="ruleForm.commercialSpecificationId">
                                <el-option :label="item.name" :value="item.id"
                                    v-for="(item, index) in commodityParametersListData" :key="index" />
                            </el-select>
                        </div>
                    </el-form-item>
                    <el-form-item label="图文详情">
                        <Wangeditor @closeOK="closeOKDataCommodityDetails" :row="ruleForm.detail">
                        </Wangeditor>
                    </el-form-item>
                    <el-form-item label="费用说明">
                        <Wangeditor @closeOK="closeOKDataPriceDescription" :row="ruleForm.descriptionFees">
                        </Wangeditor>
                    </el-form-item>
                </el-card>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        保存
                    </el-button>
                </el-form-item>
            </el-form>

        </el-row>
        <el-dialog v-model="matchingProducts" title="商品选择" width="1000px" :before-close="matchingProductsClose"
            top="5vh">
            <MatchingProductsList v-if="matchingProducts" :rowData="ruleFormData.matchingProducts"
                @matchingProductsOK="matchingProductsListOK" @matchingProductsClose="matchingProductsListClose">
            </MatchingProductsList>
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { classificationList, getShopNameList, goodsAndServicesList, commodityParametersList, productListAdd, productListUpdate, scenicAreaList } from '@/api/goods.js'
import { getMerchantCenterList } from '@/api/merchantManagement.js'
import Uploads from './elUpload.vue'
import Wangeditor from '@/components/wangeditor/index.vue'
import MatchingProductsList from '@/components/matchingProductsList/index.vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
    rowData: {
        type: Object,
        default: () => ({}), // 默认值为一个空对象
    },
    isAdd: {
        type: Boolean,
        default: false, // 默认值为一个空对象
    },
})
const emit = defineEmits(['OKdata'])

const scenicAreaData = ref([])

// 关联景区
const getScenicAreaList = async () => {
    let res = await scenicAreaList()
    if (res.code == 200) {
        console.log(res, 999);
        scenicAreaData.value = res.data
    }
}

// 基础设置-搭配商品-弹框
const matchingProducts = ref(false)
// 表单参数
const ruleFormRef = ref()
const ruleFormData = reactive({
    // 是否开启物流
    islogistics: '否',
    // 搭配商品
    matchingProducts: [],
    // 上架时间单选
    ListingTime: '0',
    // 下架时间单选
    removalTime: '0',
})
const ruleForm = reactive({
    // 关联商家-商家id，传参
    storeId: '',
    // 关联商家-门店id
    shopId: [],
    // 商品名称
    name: '',
    // 商品分类
    type: [],
    // 形成路线
    path: [],
    // 商品轮播图
    photo: [],
    // 选择物流
    logisticsCompany: '京东',
    // 售后服务
    afterSalesService: '0',
    // 退款手续费
    refundHandlingRate: 0,
    // 搭配商品id
    matchingProductsId: [],
    // 上架时间
    dateIssuedTime: '',
    // 下架时间
    removalTime: '',
    // 售卖价
    sellingPrice: 0,
    // 积分
    integral: 0,
    // 市场价
    marketPrice: 0,
    // 商品库存
    merchandiseInventory: 1,
    // 库存预警
    inventoryWarning: 0,
    // 已出售数量
    numberSold: 0,
    // 订单预约使用
    reservation: 1,
    // 商品使用id
    productUsageInstructionsId: '',
    // 商品规格id
    commercialSpecificationId: '',
    // 图文详情
    detail: '',
    // 费用说明
    descriptionFees: '',
    // 景区id
    scenicAreaId: ''
})
// 选择物流列表
const logisticsList = reactive([
    {
        value: '京东',
        label: '京东',
    },
    {
        value: '顺丰速运‌',
        label: '顺丰速运‌',
    },
    {
        value: '中通',
        label: '中通',
    },
    {
        value: '圆通',
        label: '圆通',
    },
    {
        value: '申通',
        label: '申通',
    },
    {
        value: '韵达',
        label: '韵达',
    },
    {
        value: '邮政',
        label: '邮政',
    }
])


const rules = reactive({
    name: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    type: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    shopId: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    storeId: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    path: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    photo: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    logisticsCompany: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    afterSalesService: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    refundHandlingRate: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    dateIssuedTime: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    removalTime: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    sellingPrice: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    integral: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    marketPrice: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    merchandiseInventory: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    inventoryWarning: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    numberSold: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    productUsageInstructionsId: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    commercialSpecificationId: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    scenicAreaId: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
})


// 商品描述-商品服务
const goodsServicesList = ref([])
const getGoodsServicesList = () => {
    let par = {
        name: "",
        pageNum: 1,
        pageSize: 40
    }
    goodsAndServicesList(par).then(res => {
        if (res.code == 200) {
            goodsServicesList.value = res.data.records

        }
    })
}
// 商品描述-商品参数
const commodityParametersListData = ref([])
const getCommodityParametersList = () => {
    let par = {
        name: "",
        pageNum: 1,
        pageSize: 40
    }
    commodityParametersList(par).then(res => {
        if (res.code == 200) {
            commodityParametersListData.value = res.data.records
        }
    })
}

// 礼包商品-价格库存-表格下拉框商家数据
const businessListings = reactive([])
// 礼包商品-价格库存-表格下拉框门店数据
const storeData = reactive([])
// 礼包商品-价格库存-表格下拉框选择
const changeSelect = async (data) => {
    storeData.length = 0
    ruleForm.shopId = []
    let res = await getShopNameList(data)
    if (res.code == 200) {
        storeData.push(...res.data)

    }
}
// 礼包商品-价格库存-获取表格下拉框
const getTableSelect = () => {
    businessListings.length = 0
    let par = {
        storeName: "",
        storeType: "",
        pageNum: 1,
        pageSize: 40
    }
    getMerchantCenterList(par).then(res => {
        if (res.code == 200) {
            businessListings.push(...res.data.records)
        }
    })
}

// 礼包商品-价格库存-删除数据
const deleteRow1 = (index) => {
    ruleForm.path.splice(index, 1)
}
// 礼包商品-价格库存-新增数据
const onAddItem1 = () => {
    ruleForm.path.push({
        day: 1,
        name: '',
        time: '',
        description: '',
    })
}
// 基础设置-商品图
const OKdata2 = (url) => {
    ruleForm.photo.push(...url)
}
// 基础设置-商品图-删除
const removeImg2 = (item) => {
    ruleForm.photo = item

}
// 基础设置-商品分类
const changeTypeData = ref([])
const changeType = (data) => {
    changeTypeData.value = data
    ruleForm.type = data[data.length - 1]
}

// 基础设置-搭配商品
const matchingProductsClose = () => {
    matchingProducts.value = false
}
// 基础设置-搭配商品-搭配商品传出来的值
const matchingProductsListOK = (data) => {
    ruleForm.matchingProductsId = []
    ruleFormData.matchingProducts = data
    matchingProducts.value = false
    ruleFormData.matchingProducts.forEach(item => {
        ruleForm.matchingProductsId.push(item.id)
    })
}
// 基础设置-搭配商品-搭配商品关闭
const matchingProductsListClose = () => {
    matchingProducts.value = false
}
// 基础设置-搭配商品-搭配商品删除
const deleteList = (row) => {
    ruleForm.matchingProductsId = []
    const index = ruleFormData.matchingProducts.indexOf(row);
    if (index !== -1) {
        ruleFormData.matchingProducts.splice(index, 1);
    }
    ruleFormData.matchingProducts.forEach(item => {
        ruleForm.matchingProductsId.push(item.id)
    })
}


// 商品描述-商品详情
const closeOKDataCommodityDetails = (data) => {
    ruleForm.detail = data
}

// 商品描述-价格说明
const closeOKDataPriceDescription = (data) => {
    ruleForm.descriptionFees = data
}


// 表单确认
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {

            if (props.isAdd) {
                if (ruleFormData.islogistics == '是') {
                    ruleForm.afterSalesService = ''
                } else {
                    ruleForm.logisticsCompany = ''
                }
                if (ruleFormData.ListingTime == '0') {
                    ruleForm.dateIssuedTime = ''
                }
                if (ruleFormData.removalTime == '0') {
                    ruleForm.removalTime = ''
                }
                productListAdd({ ...ruleForm }).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '添加成功'
                        })
                        emit('OKdata')
                    }
                })
            } else {
                if (ruleFormData.islogistics == '是') {
                    ruleForm.afterSalesService = ''
                } else {
                    ruleForm.logisticsCompany = ''
                }
                if (ruleFormData.ListingTime == '0') {
                    ruleForm.dateIssuedTime = ''
                }
                if (ruleFormData.removalTime == '0') {
                    ruleForm.removalTime = ''
                }
                productListUpdate({ ...ruleForm, id: props.rowData.id }).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '修改成功'
                        })
                        emit('OKdata')
                    }
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}


// 分类
// 多选下拉框
const propsData = { label: 'name', children: 'children', value: 'name' }
const classificationListData = ref([])
const getclassificationList = () => {
    let par = {
        name: "",
        pageNum: 1,
        pageSize: 30
    }
    classificationList(par).then(res => {
        if (res.code == 200) {
            classificationListData.value = res.data

        }
    })
}

onMounted(() => {

    if (Object.keys(props.rowData).length != 0) {
        // 关联商家-商家id，传参
        if (props.rowData.storeId != '') {
            changeSelect(props.rowData.storeId)
        }
        ruleForm.storeId = props.rowData.storeId
        // 关联商家-门店id
        ruleForm.shopId = props.rowData.shopId
        // 商品名称
        ruleForm.name = props.rowData.name
        // 商品分类
        ruleForm.type = props.rowData.type
        // 形成路线
        ruleForm.path = props.rowData.path
        // 商品轮播图
        ruleForm.photo = props.rowData.photo
        // 选择物流
        if (props.rowData.logisticsCompany != '') {
            ruleFormData.islogistics = '是'
        }
        ruleForm.logisticsCompany = props.rowData.logisticsCompany
        // 售后服务
        if (props.rowData.afterSalesService != '') {
            ruleFormData.islogistics = '否'
        }
        ruleForm.afterSalesService = props.rowData.afterSalesService
        // 退款手续费
        ruleForm.refundHandlingRate = props.rowData.refundHandlingRate
        // 搭配商品id
        ruleForm.matchingProductsId = props.rowData.matchingProductsId
        // 上架时间
        if (props.rowData.dateIssuedTime != '') {
            ruleFormData.ListingTime = '1'
        }
        ruleForm.dateIssuedTime = props.rowData.dateIssuedTime
        // 下架时间
        if (props.rowData.removalTime != '') {
            ruleFormData.removalTime = '1'
        }
        ruleForm.removalTime = props.rowData.removalTime
        // 售卖价
        ruleForm.sellingPrice = props.rowData.sellingPrice
        // 积分
        ruleForm.integral = props.rowData.integral
        // 市场价
        ruleForm.marketPrice = props.rowData.marketPrice
        // 商品库存
        ruleForm.merchandiseInventory = props.rowData.merchandiseInventory
        // 库存预警
        ruleForm.inventoryWarning = props.rowData.inventoryWarning
        // 已出售数量
        ruleForm.numberSold = props.rowData.numberSold
        // 订单预约使用
        ruleForm.reservation = props.rowData.reservation
        // 商品使用id
        ruleForm.productUsageInstructionsId = props.rowData.productUsageInstructionsId
        // 商品规格id
        ruleForm.commercialSpecificationId = props.rowData.commercialSpecificationId
        // 图文详情
        ruleForm.detail = props.rowData.detail
        // 费用说明
        ruleForm.descriptionFees = props.rowData.descriptionFees
        ruleForm.scenicAreaId = props.rowData.scenicAreaId
        if (props.rowData.scenicAreaId != '') {
            changeTypeData.value.push('景区商品')
        }
    }
    getclassificationList()
    getTableSelect()
    getGoodsServicesList()
    getCommodityParametersList()
    getScenicAreaList()
})
</script>

<style lang="scss" scoped>
::v-deep .el-row {
    width: 100%;
}

::v-deep .el-form {
    width: 100%;
    position: relative;
}

::v-deep .el-select {
    width: 300px !important;
}

::v-deep .el-input {
    width: 300px !important;
}

.goodsServicesDiv {
    ::v-deep .el-select {
        width: 300px !important;
    }

}

.box-card-div {
    ::v-deep .el-select {
        width: 200px !important;
    }
}

.radioGroupItem {
    ::v-deep .el-input {
        width: 50px !important;
    }
}

.eltableDiv {
    ::v-deep .el-input {
        width: 100% !important;
    }

    ::v-deep .el-select {
        width: 100% !important;
    }

    ::v-deep .el-textarea {
        width: 100% !important;
    }
}

.openCloseDiv {
    width: 900px;

    .tableDiv {
        ::v-deep .el-table th.el-table__cell {
            background-color: #f5f7fa;
        }

        ::v-deep .el-input {
            width: 150px;
        }
    }




    p {
        margin: 0;
    }
}

::v-deep .el-tabs__content {
    height: 540px;
    overflow-y: auto;

    .el-input-group {
        width: 300px;
    }

    .el-input {
        width: 300px;
    }
}

.demo-tabs {
    width: 100%;

}

.cardbutton {
    display: flex;
    align-items: center;
    gap: 20px;

    .cardbuttonItem {
        width: 100px;
        height: 80px;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        border-radius: 5px;
        cursor: pointer;

        p {
            margin: 0;
            margin-top: 5px;
        }
    }

    .itemColor {
        border-color: #409eff;
        color: #409eff;
    }
}


.item {
    margin-bottom: 18px;
}
</style>